<template>
    <div class="overall_template">
        <div class="item">
            <div class="title">账户安全</div>
            <div class="content">
                <app-button-item>
                    <template #title>
                        <div>双重身份验证（2FA）</div>
                    </template>
                    <template #explain>
                        <div>异常登录时，需通过身份验证器/登录手机号/邮箱进行身份验证</div>
                    </template>
                    <template #switch>
                        <el-switch v-model="state.formData.overall.identity.show" size="small" />
                    </template>
                    <template #body>
                        <div class="identity_content" v-if="state.formData.overall.identity.show">
                            <el-radio-group v-model="state.formData.overall.identity.value" class="column">
                                <el-radio :value="0" size="large"
                                    style="display: flex;align-items: flex-start;margin: 8px 0;">
                                    <div class="column">
                                        <div class="text1">验证等级: 低</div>
                                        <div class="text2">更换设备或距上次双重验证超过90天时登录需通过双重验证</div>
                                    </div>
                                </el-radio>
                                <el-radio :value="1" size="large"
                                    style="display: flex;align-items: flex-start;margin-bottom: 8px;">
                                    <div class="column">
                                        <div class="text1">验证等级: 中</div>
                                        <div class="text2">更换设备或距上次双重验证超过30天时登录需通过双重验证</div>
                                    </div>
                                </el-radio>
                                <el-radio :value="2" size="large" style="display: flex;align-items: flex-start;">
                                    <div class="column">
                                        <div class="text1">验证等级: 高</div>
                                        <div class="text2">每次登录需通过双重验证</div>
                                    </div>
                                </el-radio>
                            </el-radio-group>
                        </div>
                    </template>
                </app-button-item>
            </div>
        </div>

        <div class="item">
            <div class="title" style="margin-bottom: 0;">IP查询渠道</div>
            <div class="content">
                <el-radio-group v-model="state.formData.proxy.channel">
                    <el-radio v-for="item in state.map.channelOptions" :key="item.value" :value="item.value"
                        size="large">{{
                            item.label }}</el-radio>
                </el-radio-group>
            </div>
        </div>

        <div class="item">
            <div class="title">环境设置</div>
            <div class="content">
                <app-button-item>
                    <template #title>
                        <div>同步设置</div>
                    </template>
                    <template #explain>
                        <div> {{ state.formData.overall.sync.show ? '开启后，缓存数据将在多台电脑和团队成员间同步' : '关闭后，缓存数据无法在多台电脑和团队成员间同步'
                        }} </div>
                    </template>
                    <template #switch>
                        <el-switch v-model="state.formData.overall.sync.show" size="small" />
                    </template>
                    <template #body>
                        <div v-if="state.formData.overall.sync.show" class="sync_body column" style="margin-top: 8px;">
                            <div
                                style="display: flex; justify-content: space-between;width: 100%;margin-bottom: 8px;align-items: center;">
                                <div class="text1">同步插件应用数据</div>
                                <el-checkbox-group v-model="state.formData.overall.sync.value">
                                    <el-checkbox :value="0" />
                                </el-checkbox-group>
                            </div>
                            <div style="display: flex; justify-content: space-between;width: 100%;align-items: center;">
                                <div class="text1">同步LocalStorage/indexedDB</div>
                                <el-checkbox-group v-model="state.formData.overall.sync.value">
                                    <el-checkbox :value="1" />
                                </el-checkbox-group>
                            </div>
                        </div>
                    </template>
                </app-button-item>
            </div>
        </div>

        <div class="item">
            <div class="content">
                <app-button-item>
                    <template #title>
                        <div>环境多开</div>
                    </template>
                    <template #explain>
                        <div> {{ state.formData.overall.openmore.show ? '允许本团队内多人同时打开相同环境' : '禁止本团队内多人同时打开相同环境' }}
                        </div>
                    </template>
                    <template #switch>
                        <el-switch v-model="state.formData.overall.openmore.show" size="small" />
                    </template>
                </app-button-item>
            </div>
        </div>

        <div class="item">
            <div class="content">
                <app-button-item>
                    <template #title>
                        <div>本地访问</div>
                    </template>
                    <template #explain>
                        <div> 开启后，可配置使用本地网络访问的特定网址 </div>
                    </template>
                    <template #switch>
                        <el-switch v-model="state.formData.overall.localvisit.show" size="small" />
                    </template>
                    <template #body>
                        <div v-if="state.formData.overall.localvisit.show" class="column" style="margin-top: 8px;">
                            <el-input v-model="state.formData.overall.localvisit.value" style="width: 100%" :rows="6"
                                type="textarea" placeholder="输入需使用本地网络访问的网址，每行一个，支持通配符（*）。示例：
hubstudio.cn
*.hubstudio.cn" />
                        </div>
                    </template>
                </app-button-item>
            </div>
        </div>

        <div class="item">
            <div class="content">
                <app-button-item>
                    <template #title>
                        <div>禁止加载图片</div>
                    </template>
                    <template #explain>
                        <div> {{ state.formData.overall.noloadingImg.show ? '自定义浏览器加载图片的最大尺寸，节省流量' : '关闭后，浏览器正常加载图片' }}
                        </div>
                    </template>
                    <template #switch>
                        <el-switch v-model="state.formData.overall.noloadingImg.show" @change="changeNovalue('img')" size="small" />
                    </template>
                    <template #body>
                        <div v-if="state.formData.overall.noloadingImg.show" class="flex" style="margin-top: 8px;">
                            <div class="text1">图像最大尺寸</div>
                            <el-input-number style="width: 120px;margin: 0 8px;" @change="changeNovalue('img')"
                                v-model="state.formData.overall.noloadingImg.value" :min="0"
                                controls-position="right" />
                            <div>KB</div>
                        </div>
                    </template>
                </app-button-item>
            </div>
        </div>

        <div class="item">
            <div class="content">
                <app-button-item>
                    <template #title>
                        <div>禁止加载视频</div>
                    </template>
                    <template #explain>
                        <div> {{ state.formData.overall.noloadingVideo.show ? '开启后，浏览器禁止加载视频，提升速度，节省流量' :
                            '关闭后，浏览器正常加载视频' }}
                        </div>
                    </template>
                    <template #switch>
                        <el-switch v-model="state.formData.overall.noloadingVideo.show" @change="changeNovalue('viedo')" size="small" />
                    </template>
                </app-button-item>
            </div>
        </div>

        <div class="item">
            <div class="content">
                <app-button-item>
                    <template #title>
                        <div>禁止播放声音</div>
                    </template>
                    <template #explain>
                        <div> {{ state.formData.overall.noloadingMusic.show ? '开启后，音视频播放时默认静音' :
                            '关闭后，音视频默认正常播放' }}
                        </div>
                    </template>
                    <template #switch>
                        <el-switch v-model="state.formData.overall.noloadingMusic.show" @change="changeNovalue('music')" size="small" />
                    </template>
                </app-button-item>
            </div>
        </div>

        <div class="item">
            <div class="content">
                <app-button-item>
                    <template #title>
                        <div>上传/下载风控</div>
                    </template>
                    <template #explain>
                        <div> {{ state.formData.overall.uploadRisk.show ? '使用非指定文件夹上传/下载时提示风险' : '使用非指定文件夹上传/下载时不提示风险'
                        }}
                        </div>
                    </template>
                    <template #switch>
                        <el-switch v-model="state.formData.overall.uploadRisk.show" size="small" />
                    </template>
                </app-button-item>
            </div>
        </div>

        <div class="item">
            <div class="content">
                <app-button-item>
                    <template #title>
                        <div>仿真输入延迟</div>
                    </template>
                    <template #switch>
                        <div class="flex">
                            <el-input-number style="width: 120px;margin: 0 8px;"
                                v-model="state.formData.overall.inputDelay" :min="0" controls-position="right" />
                            <div>KB</div>
                        </div>
                    </template>
                </app-button-item>
            </div>
        </div>

        <div class="item">
            <div class="title">云手机设置</div>
            <div class="content">
                <app-button-item>
                    <template #title>
                        <div>节能模式</div>
                    </template>
                    <template #switch>
                        <el-switch v-model="state.formData.overall.energy.show" size="small" />
                    </template>
                    <template #body>
                        <div v-if="state.formData.overall.energy.show" class="flex" style="margin-top: 8px;">
                            <div>按月计费云手机</div>
                            <el-select v-model="state.formData.overall.energy.value" style="width: 90px;margin: 0 8px;">
                                <el-option label="30" :value="30" />
                                <el-option label="60" :value="60" />
                                <el-option label="90" :value="90" />
                            </el-select>
                            <div>分钟无操作自动关机</div>
                        </div>
                    </template>
                </app-button-item>
            </div>
        </div>

        <div class="item">
            <div class="content">
                <app-button-item>
                    <template #title>
                        <div>省钱模式</div>
                    </template>
                    <template #explain>
                        <div> 15分钟内均无操作时，自动关机按分钟计费的云手机</div>
                    </template>
                    <template #switch>
                        <el-switch v-model="state.formData.overall.savemoney.show" size="small" />
                    </template>
                </app-button-item>
            </div>
        </div>

        <div class="item">
            <div class="content">
                <app-button-item>
                    <template #title>
                        <div>自动清理sdcard数据</div>
                    </template>
                    <template #switch>
                        <el-switch v-model="state.formData.overall.cleanSdcard.show" size="small" />
                    </template>
                    <template #body>
                        <div v-if="state.formData.overall.cleanSdcard.show" class="flex" style="margin-top: 8px;">
                            <div>开机时自动清理</div>
                            <el-select v-model="state.formData.overall.cleanSdcard.value"
                                style="width: 90px;margin: 0 8px;">
                                <el-option label="3天前" :value="0" />
                                <el-option label="7天前" :value="1" />
                            </el-select>
                            <div>sdcard数据以提升开机速度</div>
                        </div>
                    </template>
                </app-button-item>
            </div>
        </div>


    </div>
</template>

<script setup>
const { store, state } = inject('preference_store')

const changeNovalue = (value) => {
    if (value == 'img') {
        state.formData.hign.loadingImg = state.formData.overall.noloadingImg.show ? 1 : 2
        state.formData.hign.imgSize = state.formData.overall.noloadingImg.value
    } else if (value == 'video') {
        state.formData.hign.loadingVide = state.formData.overall.noloadingVideo.show ? 1 : 2
    } else if (value == 'music') {
        state.formData.hign.loadingMusic = state.formData.overall.noloadingMusic.show ? 1 : 2
    }
    
}
</script>

<style lang="scss" scoped>
.overall_template {
    display: flex;
    flex-direction: column;

    .item:not(:first-child) {
        margin-top: 16px;
    }

    .item {
        display: flex;
        flex-direction: column;


        .title {
            color: #1d2129;
            font-size: 14px;
            margin-bottom: 16px;
        }
    }
}

.flex {
    display: flex;
    align-items: center;
}

.column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.text1 {
    font-size: 14px;
    color: #1d2129;
}

.text2 {
    color: #86909c;
    font-size: 12px;
}
</style>

<style>
.identity_content .el-radio__input {
    margin-top: 4px;
}
</style>